<template>
    <div>
        <div class="top_color">
            <div>
                <van-nav-bar class="vant_back" left-arrow>
                    <template class="vant_back"  #right>
                        <van-icon name="search" size="18" color="white" />
                        <van-icon name="link-o" size="18" color="white" />
                    </template>
                </van-nav-bar>
                <div>
                    <div class="top_img">
                        <van-image
                        class="img_one"
                        round
                        cover
                        width="90px"
                        height="90px"
                        src="5.jpeg"
                        />
                        <div>
                            <h3 style="color: white;">晚风心里吹</h3>
                            <p style="color: white;">UID:2310100086</p>
                            <p style="color: white;">IP地址:北京</p>
                        </div>
                    </div>
                    
                    <p  style="color: white;margin-left: 20px;">点击这里，填写个性签名</p>
                    <span class="span_small">lv.1</span>
                    <div class="p_main">
                        <div class="p_three">
                            <div>
                                <p class="p_top">104</p>
                                <span class="p_bottom">关注</span>
                            </div>
                            <div>
                                <p class="p_top">6,152</p>
                                <span class="p_bottom">粉丝</span>
                            </div>
                            <div>
                                <p class="p_top">6.1万</p>
                                <span class="p_bottom">获赞</span>
                            </div>
                        </div>
                        <van-button plain type="primary" @click="goziliao">编辑资料</van-button>
                    </div>
                    <van-tabs>
                    <van-tab title="文章" name="a">文章</van-tab>
                    <van-tab title="视频" name="c">视频</van-tab>
                    </van-tabs>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRouter} from 'vue-router';


const router = useRouter()

function goziliao(){
    router.push('/mineTwo')
}



</script>

<style lang="scss" scoped>
//顶部渐变样式
.top_color {
    width: 100vw;
    height: 45vh;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 600% 600%;
    padding-top: 1vh;
    animation: gradientBG 5s ease infinite;

}
@keyframes  gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
  }
.vant_back{
    background-color: rgba(0,0,0,0);
    border: 0px solid none;
    color: white;
}
.top_img{
    display: flex;
    align-items: center;
    width: 250px;
    justify-content: space-around;

}
.span_small{
    padding: 2px 5px;
    text-align: center;
    border-radius: 10%;
    color: white;
    margin-left: 20px;
    
}
.p_top{
    color: white;
}
.p_bottom{
    color: #aaaaaa;
    font-size: 13px;
}
.p_three{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 200px;
    height: 100%;
    margin-top: 20px;
}
.p_main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95vw;
    margin-bottom: 30px;
}
</style>